<template>
    <view class="item">
        <view class="merchant">
            <!-- 商家全选 -->
            <div class="check"><xxl-checkbox @change="checkAll" :val="i.checked" d="25" :k="i.id"></xxl-checkbox></div>
            <text class="m_name">{{
                i.name }}</text>
            <view class="m_del" @click="delitem(i.id)">x</view>
        </view>
        <view class="items" v-for="(item, k) in i.data" :key="k">
            <!-- 选择一个 -->
            <view class="check">
                <xxl-checkbox @change="checkItem" d="25" :val="item.checked" :k="item.id"></xxl-checkbox>
            </view>
            <view class="item_main">
                <div class="item_img"><img class="img" :src="item.img" alt=""></div>
                <view class="item_ctx">
                    <view class="i_head"><text class="i_name">{{ item.name }}</text>
                        <view @click="delitem(item.id)" class="m_del">x</view>
                    </view>
                    <view class="i_foot">
                        <view class="i_money"><text>{{ '￥ ' + moneyFormat(item.price) }}</text></view>
                        <view class="i_much"><xxl-num-box @change="change" min="1" :val="item.much"
                                :k="item.id"></xxl-num-box></view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'Item',

    data() {
        return {
        };
    },
    props: {
        i: {

        },
    },
    updated() {

    },
    mounted() {

    },
    methods: {
        change(i, id, o) {
            let d = { id: id, fid: this.i.id, much: i }
            this.$store.commit('setShopMuch', d)
        },
        checkAll(b, id) {
            let d = { b, id }
            this.$store.commit('checkItemAll', d)
        },
        checkItem(b, id) {
            let d = {
                fid: this.i.id,
                id,
                b
            }
            this.$store.commit('checkShopItem', d)
        },
        delitem(d) {
            this.$store.commit('delItem', d)
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.item {
    background: white;
    border-radius: 15px;
    box-sizing: border-box;
    margin: 0px 8px 15px;
    padding: 15px;
}

.merchant,
.items,
.item_main {
    display: flex;
}

.m_name {
    width: calc(100% - 50px);
}

.m_del {
    width: 20px;
    font-size: 20px;
    color: $uni-text-color-grey;
}

.items {
    margin: 20px 0px;
}

.check {
    width: 30px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item_main {
    width: calc(100% - 40px);
    box-sizing: border-box;
}

.item_img {
    width: 80px;
    height: 80px;
    background: gray;

    .img {
        width: 100%;
        height: 100%;
    }
}

.item_ctx {
    display: flex;
    width: calc(100% - 80px);
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding-left: 10px;

}

.i_head {
    width: 100%;
    display: flex;
}

.i_name {
    width: calc(100% - 20px);
}


.i_foot {
    display: flex;
    justify-content: space-between;
}

.i_money {
    color: orangered;
}
</style>